<!--
 * @Author: xjt
 * @Date: 2021-06-24 23:10:39
 * @LastEditTime: 2021-06-24 23:11:14
 * @Description: 隔离点预定
 * @LastEditors: xjt
-->
<template>
  <basic-container v-loading="loading" element-loading-text="数据加载中...">
    <dataList
      :pageInfo="pager"
      :listData="tableData"
      :menuList="['export']"
      @menu-click="handleMenuClick"
      :listLayout="['menu']"
    >
      <el-table
        :data="tableData"
        align="left"
        ref="multipleTable"
        @selection-change="($event) => (selectDataArr = $event)"
      >
        <el-table-column
          v-for="col in tableCols"
          :key="col.prop"
          :label="col.label"
          :prop="col.prop"
        >
          <template slot-scope="scope">
            <el-tag @click="gg(scope)" v-if="scope.column.property == 'hotelType'" type="success">{{
             scope.row[col.prop] | dict("hotel_type")
            }}</el-tag>
            <span v-else >{{ scope.row[col.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="180"
          class="operaColumn"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="handleBtnClick('preview', scope.row)"
              >查看</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="handleBtnClick('reserve', scope.row)"
              >预订</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </dataList>
    <!-- 新增|编辑|查看 单位 -->
    <reserveDialog ref="viewDialog" />
  </basic-container>
</template>
<script>
import {
  queryList
} from "./api/reserve.js";
import { mapGetters } from "vuex";
import reserveDialog from "./components/reserveDialog";
import {tableOption} from "./const"

export default {
  components: {
    reserveDialog,
  },
  provide() {
    return {
      //初始化数据
      initList: [],
    };
  },
  beforeMount() {
    this.queryData();
  },
  data() {
    return {
      // 表格列表数据
      tableData: [tableOption.tableData],
      // 请求参数
      params: {
        current: 1,
        size: 20,
      },
      // 选中的数据
      selectDataArr: [],
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 20, // 每页显示多少条
      },
      // 页面loading
      loading: false,
      tableCols: tableOption.column
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    gg(g){
console.log(g)
    },
    // 数据请求
    queryData(params = {}) {
      this.loading = true;
      let requestData = { ...this.params, ...params };
      queryList(requestData)
        .then((res) => {
          const { current, size, total, records } = res.data.data;
          this.tableData = records;
          this.params = requestData;
          this.pager = { total, current, size };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //表格按钮点击事件监听
    handleBtnClick(type, row = {}) {
      console.log(row);
      switch (type) {
        case "preview":
          this.$refs.viewDialog.show({
            type,
            data: JSON.parse(JSON.stringify(row)),
          });
          break;
        case "reserve":
          this.$refs.viewDialog.show({
            type,
            data: JSON.parse(JSON.stringify(row)),
          });
          break;
      }
    },

    // 菜单点击监听
    handleMenuClick(type) {
      switch (type) {
        case "export":
          // 导出
          /*   this.publicExport(
            row.fileName,
            `/admin/sys-file/download/${row.bucketName}/${row.id}`
          ); */
          break;
        default:
          this.$message(type);
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.operateMain {
  /deep/ .top-buttons {
    float: right;
    width: 50%;
  }
  /deep/ .v-search {
    width: 50%;
    justify-content: flex-start;
  }
  /deep/ .operaColumn .el-button {
    color: var(--color);
  }
}
</style>


